<template>
  <!--设置支付密码-->
  <div class="l-box">
    <p class="l-title-name">设置支付密码</p>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>支付密码：</span>
      </div>
      <input ref="paypassword" type="password" placeholder="请输入支付密码">
    </div>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>验证码：</span>
      </div>
      <input class="l-veritfy" ref="verify" type="text" placeholder="请输入验证码">
      <span @touchstart="getVerify" class="l-btn-verify">{{text}}</span>
    </div>

    <!--<div class="l-filed">-->
      <!--<div class="l-label">-->
        <!--<span class="l-color-red">*</span><span>登录密码：</span>-->
      <!--</div>-->
      <!--<input ref="username" type="text" placeholder="请输入登录密码">-->
    <!--</div>-->

    <div class="l-btn-ground">
      <div @click="submit" class="l-btn-submit">确定</div>
      <div @touchstart="router" class="l-btn-return">返回</div>
    </div>
  </div>
</template>

<script>
  import {Toast} from "mint-ui"
  import {mapState} from 'vuex'
  import api from '@/api/login'
  export default {
    name: "real-name",
    data () {
      return {
        handler: true,
        text: "获取验证码"
      }
    },
    components: {
    },
    computed: {
      ...mapState(['person'])
    },
    methods: {
      submit () {
        let data = {}
        data['paypassword'] = this.$refs.paypassword.value
        data['verify'] = this.$refs.verify.value

        if(!data['paypassword']) {
          Toast({
            message: "支付密码不能为空",
            duration: 1000,
            position: "middle"
          })
        } else if (!data['verify']) {
          Toast({
            message: "验证码不能为空",
            duration: 1000,
            position: "middle"
          })
        } else {
          // ajax
          let formdata = new FormData
          formdata.append('newcode', data['verify'])
          formdata.append('paypwd', data['paypassword'])
          formdata.append('id', this.person.userInfo.id)
          api.post("user/peRegister/updatepaypwd", formdata, {isToken: true}).then(res => {
            Toast({
              message: '设置成功'
            })
            this.$router.go(-1)
          })
        }
      },
      getVerify () {
        let data = {}
        data['phone'] = this.person.userInfo.phone
        if(!data['phone']) {
          Toast({
            message: "手机号码不能为空",
            duration: 1000,
            position: "middle"
          })
        } else if (!/1[3,4,5,7,8][0-9]{9}/.test(data['phone'])) {
          Toast({
            message: "手机号码格式错误",
            duration: 1000,
            position: "middle"
          })
        } else {
          if (this.handler) {
            let  time = 50
            this.handler = false
            //ajax请求
            let formdata = new FormData
            formdata.append('phone', data['phone'])
            api.post("user/peCheckcode/code", formdata).then(()=>{})
            // 记时函数
            const codeTime = () => {
              setTimeout( () => {
                if (time >= 0) {
                  this.text = time + "s"
                  codeTime ()
                } else {
                  this.text = "重新获取验证码"
                  this.handler = true
                }
                --time
              }, 1000)
            }
            codeTime()
          }
        }
      },
      router () {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>

  .l-box {
    border: 1px solid #9e7032;
    width: 700px;
    padding: 40px 10px;
    margin: auto;
    box-sizing: border-box;
  }
  .l-title-name {
    font-size: 40px;
    color: #9e7032;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .l-filed {
    display: flex;
    height: 70px;
    line-height: 70px;
    color: #9e7032;
    margin-bottom: 40px;
    font-size: 28px;

    .l-label {
      width: 180px;
    }

    input {
      outline: none;
      border: 1px solid #9e7032;
      width: 460px;
      padding-left: 20px;
      background-color: #fefef1;
      font-size: 24px;
    }

    .l-veritfy {
      width: 240px;
    }

    .l-btn-verify {
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      text-align: center;
      color: #fff;
      background-color:  #000;
      border-radius: 45px;
      margin-left: 20px;
      font-size: 24px;
    }
    .l-color-red {
      color: red;
    }
  }

  .l-btn-ground {
    margin-left: 194px;
    margin-bottom: 40px;
    display: flex;

    .l-btn-submit, .l-btn-return {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 32px;
      background-color: #986d33;
      color: #fff;
      border-radius: 45px;
    }
    .l-btn-return {
      margin-left: 20px;
    }
  }

</style>
